<template>
	<view class="main">
		<!-- top S -->
        <view class="top" :style="{background:backgroundList[channelId - 1]}">
            <text>充值成功已结算</text>
            <text>请到视频官方关注充值到账情况</text>
        </view>
		<!-- top E -->
		<!-- content S -->
		<view class="content">
			<view class="row">
				<view class="imgBox">
					<image src="../../static/logo.png" mode=""></image>
				</view>
				<view class="fontBox">
					<text>优酷VIP7天卡</text>
					<text>￥6.30</text>
				</view>
			</view>
			<view class="row">
				<text>充值账户</text>
				<text>17600782315</text>
			</view>
			<view class="row">
				<text>有效时长</text>
				<text>7天</text>
			</view>
			<view class="row">
				<text>商品总价</text>
				<text>￥6.3</text>
			</view>
			<view class="row">
				<text>实付金额</text>
				<text>￥6.3</text>
			</view>
		</view>
		<!-- content E -->
		<!-- orderInfo S -->
		<view class="orderInfo">
			<view class="row">
				<text>订单编号：</text>
				<text>0000000000000001</text>
				<text>复制</text>
			</view>
			<view class="row">
				<text>下单时间：</text>
				<text>2021-11-24 16:54:36</text>
			</view>
		</view>
		<!-- orderInfo E -->
		<!-- toast S -->
		<view class="toast">
			<text class="title" :style="{color:backgroundList[channelId-1]}">温馨提示</text>
			<view class="textBox">
				<!-- <view class="channelItem" v-for="(item,index) in channel" :key="index" >
					<view class="box">
						<image src="../../static/logo.png" mode=""></image>
						<text>{{item.name}}</text>
					</view>
				</view> -->
				<text class="row" v-for="(item,index) in tostTextDatas" :key="index">
					{{index + 1}}. {{item}}
				</text>
				<text class="row">
					123456789
				</text>
			</view>
		</view>
		<!-- toast E -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'OrderDetail',
                channelId : 1,
                backgroundList : [
                    'red',
                    'blue',
                    'green'
                ],
				tostTextDatas : [
					'请仔细核对充值账号，虚拟商品无法退换货',
					'请到腾讯视频 App/电视端中查看到账情况，若充值未生效，请检查充值账号的正确性并重新登录。如有疑问，可联系客服',
				]
			}
		},
		onLoad(param) {
			console.log(param);
		},
		methods: {
			
		}
	}
</script>

<style>
    .top{
        height: 350rpx;
        padding-left: 60rpx;
        border: 0rpx solid red;
		padding-top: 50rpx;
    }
    .top>text{
        display: block;
        color: #FFFFFF;
    }
    .top>text:first-child{
        font-size: 32rpx;
		font-weight: bold;
    }
    .top>text:last-child{
        margin-top: 20rpx;
        font-size: 20rpx;
    }
	
	.content{
		width: 95%;
		border: 0rpx solid blue;
		margin: 0 auto;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		position: relative;
		top: -210rpx;
		padding-bottom: 20rpx;
		padding-top: 20rpx;
	}
	.content>.row{
		padding-top: 10rpx;
		height: 60rpx;
		border-bottom: 1rpx solid #F1F1F1;
		margin-top: 10rpx;
	}
	.content>.row:first-child{
		height: 140rpx;
	}
	.content>.row:first-child>.imgBox{
		height: 120rpx;
		width: 120rpx;
		float: left;
		margin-left: 20rpx;
		border-radius: 20rpx;
	}
	.content>.row:first-child>.imgBox>image{
		height: 100%;
		width: 100%;
		border-radius: 10rpx;
	}
	.content>.row:first-child>.fontBox{
		border: 0rpx solid green;
		float: left;
		margin-left: 20rpx;
	}
	.content>.row:first-child>.fontBox>text{
		display: block;
		height: 60rpx;
		line-height: 60rpx;
	}
	.content>.row>text:first-child{
		margin-left: 20rpx;
	}
	.content>.row>text:last-child{
		border: 0rpx solid red;
		display: inline-block;
		width: 75%;
		text-align: right;
	}
	.content>.row:last-child{
		height: 80rpx;
		line-height: 80rpx;
		border-bottom: 0;
	}
	.content>.row:last-child>text:first-child{
		font-size: 34rpx;
	}
	.content>.row:last-child>text:last-child{
		width: 73%;
		color: red;
		font-size: 32rpx;
		font-weight: bold;
	}
	
	.orderInfo{
		position: relative;
		width: 95%;
		border: 0rpx solid red;
		margin: 0 auto;
		top: -190rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		padding: 20rpx 0 20rpx 0;
	}
	.orderInfo>.row{
		margin-left: 20rpx;
		height: 60rpx;
		line-height: 60rpx;
	}
	.orderInfo>.row>text:first-child{
		display: inline-block;
		font-size: 24rpx;
		border: 0rpx solid red;
		width: 140rpx;
	}
	.orderInfo>.row>text:nth-child(2){
		display: inline-block;
		font-size: 28rpx;
		border: 0px solid red;
		margin-right: 20rpx;
		width: 60%;
	}
	.orderInfo>.row>text:nth-child(3){
		display: inline-block;
		border: 0rpx solid blue;
		font-size: 10rpx;
		height: 36rpx;
		line-height: 36rpx;
		width: 80rpx;
		text-align: center;
		border-radius: 20rpx;
		background-color: #C0C0C0;
	}
	.orderInfo>.row:last-child>text:last-child{
		font-size: 24rpx;
	}
	
	.toast{
		width: 95%;
		border: 0rpx solid red;
		margin: 0 auto;
		margin-top: -160rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		padding-bottom: 20rpx;
		padding-top: 10rpx;
	}
	.toast>.title{
		display: block;
		border: 0rpx solid red;
		margin: 0 auto;
		width: 220rpx;
		text-align: center;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}
	.toast>.title::before{
		content: '—';
		float: left;
		display: inline-block;
		margin-right: 4rpx;
	}
	.toast>.title::after{
		content: '—';
		float: right;
		display: inline-block;
		margin-left: 4rpx;
	}
	
	.toast>.textBox>.row{
		display: block;
		border: 0rpx solid red;
		line-height: 40rpx;
		font-size: 16rpx;
		width: 95%;
		margin: 0 auto;
	}
	.toast>.textBox>.row:last-child{
		color: red;
	}
</style>
